<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <!--  Coolie是浏览器存储数据的一种方式; 
      因为存储在用户本地，而不是存储在服务器上，是本地存储; 
      一般会自动随浏览器每次请求发送到服务器端;
      Cookie有什么作用; 
      1.跟踪访问用户访问该网站的习惯,比如什么时间访问,访问了哪些页面,在每个页面的停留时间等; 
      3.不要在Cookie中保存敏感信息;  -->
    <button id="cn">中文</button>
    <button id="en">英文</button>
    <script type="module">
        import {set, get, remove } from "./cookie.js";
    </script>
    <script>
        set("username", "weixing");
        set("姓名", "张三");
        console.log(get("username"));
        // 使用封装好的cookie实现网站语言的切换 
        const cnBtn = document.getElementById("cn");
        const enBtn = document.getElementById("en");
        cnBtn.addEventListener(
            "click", () => {
                set("language", "cn", {
                    maxAge: 30 * 24 * 3600,
                });
                // 刷新页面发送新cookie 
                window.location = "./cookie.html";
            }, false);
        enBtn.addEventListener("click", () => {
            set("language", "en", {
                maxAge: 30 * 24 * 3600,
            });
            window.location =
                "./cookie.html";
        }, false); // cookie注意事项 // 1.前后端都可以创建COOKIE // 2.每个域名下的Cookie数量有限 // 当超过单个域名限制后,再设置cookie,浏览器就会清除以前设置的cookie // 3.每个cookie存储容量很小,最多只有4KB左右
    </script>
</body>

</html>